<template>
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="700px" ok-text="确认" cancel-text="取消" @ok="addFormSubmit" class="ensureOrder_modal">
    <a-form layout="horizontal" :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
      <!-- 添加 -->
      <div v-if="!insureRefundBillId">
        <a-form-item label="月份选择">
          <a-month-picker valueFormat="YYYY-MM" placeholder="选择月份"
            v-decorator="['refundMonth', { rules: [{ required: true, message: '请选择月份' }] }]"></a-month-picker>
        </a-form-item>
        <!-- <a-form-item label="人员选择">
          <a-tree-select v-decorator="['insureNo', { rules: [{ required: true, message: '请选择人员' }] }]"
            :tree-data="treeData" placeholder="请选择人员"
            :replaceFields="{ value: 'orgId', title: 'orgName', children: 'children' }" style="width: 200px;" />
        </a-form-item> -->
        <a-form-item label="人员名称">
          <a-input v-decorator="['insureName', { rules: [{ required: true, message: '请输入人员名称' }] }]" placeholder="请输入人员名称" style="width: 200px;"></a-input>
        </a-form-item>
        <a-form-item label="人员身份证">
          <a-input v-decorator="['idCard', { rules: [{ required: true, message: '请输入人员身份证' }] }]" placeholder="请输入人员身份证" style="width: 200px;"></a-input>
        </a-form-item>
        <a-form-item label="服务商选择">
          <a-select placeholder="请选择订单服务商" v-decorator="['parkId', { rules: [{ required: true, message: '请选择订单服务商' }] }]" style="width: 200px;">
            <a-select-option v-for="item in parkList" :key="item.parkId">{{ item.parkName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-divider></a-divider>
        <a-page-header title="退缴订单信息" style="padding-top: 0;">
          <template slot="extra">
            <a-button icon="plus" type="primary" shape="circle" ghost size="small" @click="addInfo"></a-button>
          </template>
        </a-page-header>
        <div class="info" v-for="item, index in refundList" :key="index">
          <a-form-item label="退缴项目">
            <a-select placeholder="请选择退缴项目" v-model="item.insureType">
              <a-select-option v-for="item in insureList" :key="item.insureType">{{ item.insureTypeName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="退缴金额">
            <a-input placeholder="请输入退缴金额" v-model="item.refundFee" style="width: 160px;margin-right: 10px;"></a-input>
            <a-button icon="minus" type="danger" shape="circle" ghost size="small" @click="delInfo(index)"></a-button>
          </a-form-item>
        </div>
        <a-divider></a-divider>
        <a-form-item label="退缴合计">
          <div style="text-align: right;padding-right: 200px;font-size: 24px;color: #ff4d4f;">{{ refundAmount }}</div>
        </a-form-item>
      </div>
      <!-- 详情 -->
      <div v-else>
        <a-form-item label="人员姓名">
          {{ refundBillInfo.insureName }}
        </a-form-item>
        <a-form-item label="退缴月份">
          {{ refundBillInfo.refundMonth }}
        </a-form-item>
        <a-divider></a-divider>
        <a-page-header title="退缴订单信息" style="padding-top: 0;">
        </a-page-header>
        <div class="info" v-for="item, index in refundBillInfo.refundFeeList" :key="index">
          <a-form-item label="退缴项目">
            <span>{{ item.insureTypeName }}</span>
          </a-form-item>
          <a-form-item label="退缴金额">
            <span>{{ item.refundFee }}</span>
          </a-form-item>
        </div>
        <a-divider></a-divider>
        <a-form-item label="退缴合计">
          <div style="text-align: right;padding-right: 200px;font-size: 24px;color: #ff4d4f;">{{ refundBillInfo.refundAmount }}</div>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
import {
  refundBillAdd,
  refundBillQuery,
  listInsureType
} from "@/api/human/ensureEnsureOrder"
import {
  parkRelation
} from "@/api/human/ensurePayOrder"
import {
  selectEnterpriseOrgTreeStaff
} from "@/api/human/ensureJoinStaff"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      submitLoading: false,

      insureRefundBillId: '',
      enterpriseId: "",

      refundList: [
        { insureType: undefined, refundFee: "" }
      ],
      refundAmount: 0, // 退缴合计

      refundBillInfo: {}, // 退缴项目详情信息
      treeData: [], // 参保人员列表
      parkList: [], // 服务商列表
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {
    refundList: {
      handler(newVal, oldVal) {
        let price = 0;
        newVal.forEach(item => {
          price += Number(item.refundFee);
        })
        this.refundAmount = price;
      },
      deep: true
    }
  },
  methods: {
    // 打开编辑弹窗 
    async add(rows, enterpriseId) {
      this.visible = true;
      this.enterpriseId = enterpriseId;
      this.insureRefundBillId = rows == true ? '' : rows.insureRefundBillId;
      if (rows === true) {
        this.title = '发起退款';
        this.getParkRelation();
        this.getListInsureType();
        this.getTreeData();
        this.refundList = [{ insureType: undefined, refundFee: "" }];
        this.$nextTick(() => {
          this.events_form.resetFields();
        })
      } else {
        this.title = '退缴项目详情';
        const { code, data } = await refundBillQuery(this.insureRefundBillId)
        if (code == 1) {
          this.refundBillInfo = data;
        }
      }
    },
    // 获取人员列表
    async getTreeData() {
      let params = {
        parentOrgId: this.enterpriseId,
        enterpriseId: this.enterpriseId,
        staffType: 2
      }
      const { code, data } = await selectEnterpriseOrgTreeStaff(params);
      if (code === '1') {
        this.treeData = data;
      }
    },
    // 获取服务商列表
    async getParkRelation() {
      this.events_form.resetFields("parkId");
      const { code, data } = await parkRelation(this.enterpriseId);
      if (code == "1") {
        this.parkList = data;
      }
    },
    // 获取服务商列表
    async getListInsureType() {
      const { code, data } = await listInsureType(this.enterpriseId);
      if (code == "1") {
        this.insureList = data;
      }
    },
    // 添加订单信息
    addInfo() {
      this.refundList.push({ insureType: undefined, refundFee: "" })
    },
    // 删除订单信息
    delInfo(index) {
      this.refundList.splice(index, 1)
    },
    // 提交
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.enterpriseId) {
            values.enterpriseId = this.enterpriseId;
          }
          if (this.refundList.length > 0) {
            let isMust = false;
            this.refundList.forEach((item, index) => {
              if (!item.insureType) {
                this.$message.warning('请选择退款项目(' + (index + 1) + ')');
                isMust = true;
              }
              if (!item.refundFee) {
                this.$message.warning('请输入退款金额(' + (index + 1) + ')');
                isMust = true;
              }
            })
            if (!isMust) {
              values.refundList = this.refundList
              // console.log(values);
              this.submitLoading = true;
              const { code } = await refundBillAdd(values);
              this.submitLoading = false;
              if (code === '1') {
                this.visible = false;
                this.$message.success('操作成功');
                this.$emit('on-ok');
              }
            }
          } else {
            return this.$message.warning("请添加退缴订单信息");
          }
        }
      });
    }
  }
}
</script>
<style lang="less">
.ensureOrder_modal {
  .info {
    .ant-form-item {
      width: 50%;
      margin-right: 0;
      margin-bottom: 10px;
      display: inline-block;
    }
  }
}</style>
